<template> 
  <view class="setting-container"> 

    <!-- 设置项列表 --> 
    <view class="setting-list"> 
      <view class="setting-item"> 
        <text>通知开关</text> 
        <switch @change="toggleNotification"></switch> 
      </view> 
      <view class="setting-item"> 
        <text>声音开关</text> 
        <switch @change="toggleSound"></switch> 
      </view> 
      <view class="setting-item"> 
        <text>清除缓存</text> 
        <uni-icons class="arrow" color="black" type="right" size="18" @click="clearCache"></uni-icons> 
      </view> 
    </view> 
  </view> 
</template> 
 
<script setup> 
import { ref } from 'vue'; 
 
// 通知开关状态 
const isNotificationOn = ref(true); 
// 声音开关状态 
const isSoundOn = ref(true); 
 
// 切换通知开关 
const toggleNotification = () => { 
  isNotificationOn.value  = !isNotificationOn.value;  
}; 
 
// 切换声音开关 
const toggleSound = () => { 
  isSoundOn.value  = !isSoundOn.value;  
}; 
 
// 清除缓存 
const clearCache = () => { 
  // 这里可以添加清除缓存的具体逻辑 
  console.log(' 清除缓存'); 
}; 
</script> 
 
<style lang="scss" scoped> 
.setting-container { 
  width: 90%; 
  padding: 20rpx; 
  margin: 0 auto; 
  border: 1px solid #eee; 
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08); 
 

 
  .setting-list { 
    background-color: #fff; 
    border-radius: 15rpx; 
    padding: 0 30rpx; 
 
    .setting-item { 
      display: flex; 
      align-items: center; 
      justify-content: space-between; 
      padding: 30rpx 0; 
      border-bottom: 1rpx solid #eee; 
 
      &:last-child { 
        border-bottom: none; 
      } 
    } 
  } 
} 
</style> 